<template>
  <view class="containter">
    <image class="bgImg" src="../../static/images/bgImg.png" mode="widthFix"></image>
    <view style="width: 100vw;height: 100vh;position: absolute;top: 10;left: 20;z-index: 100;">
      <view class="title">忘记密码</view>
      <view class="login-warpper">
        <view class="login-warpper-item flex flex-between align-center">
          <image class="icon" src="../../static/images/phone.png" mode=""></image>
          <uv-input placeholder="请输入手机号" maxlength="11" border="none" v-model="fromLine.phone"></uv-input>
        </view>
        <view class="login-warpper-item flex flex-between align-center">
          <image class="icon" src="../../static/images/code.png" mode=""></image>
          <uv-input placeholder="请输入验证码" maxlength="6" border="none" v-model="fromLine.code"></uv-input>
          <view class="code" @click="sendCode" v-if="!btnDisabled">
            获取验证码
          </view>
          <view class="code" v-if="btnDisabled" style="font-size: 30rpx;">
            {{ countdown + " " + "s" }}
          </view>
        </view>
        <view class="login-warpper-item flex flex-between align-center">
          <image class="icon" src="../../static/images/clock.png" mode=""></image>
          <uv-input placeholder="请输入新密码" :password="flag" border="none" v-model="fromLine.password"></uv-input>
          <image class="psdIcon" :src="flag?'../../static/images/hide.png':'../../static/images/show.png'" mode=""
            @click="handleToggle"></image>
        </view>
        <view class="login-warpper-item flex flex-between align-center">
          <image class="icon" src="../../static/images/clock.png" mode=""></image>
          <uv-input placeholder="请再次输入密码" :password="flag2" border="none" v-model="fromLine.againPassword"></uv-input>
          <image class="psdIcon" :src="flag2?'../../static/images/hide.png':'../../static/images/show.png'" mode=""
            @click="handleToggle2"></image>
        </view>
      </view>
      <view class="footer">
        <view class="btn" @click="handleLogin">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        fromLine: {
          phone: "",
          code: "",
          password: "",
          againPassword: ""
        },
        countdown: 0,
        btnDisabled: false,
        timer: null,
        flag: true,
        flag2: true
      }
    },
    methods: {
      async handleLogin() {
        if (!this.fromLine.phone) {
          uni.showToast({
            title: "手机号不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!tools.checkPhone(this.fromLine.phone)) {
          uni.showToast({
            title: "手机号格式错误",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.fromLine.code) {
          uni.showToast({
            title: "验证码不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.fromLine.password) {
          uni.showToast({
            title: "密码不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.fromLine.againPassword) {
          uni.showToast({
            title: "请再次输入密码",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (this.fromLine.againPassword != this.fromLine.password) {
          uni.showToast({
            title: "两次密码不一致",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.editPasswd(this.fromLine).then(res=>{
          uni.showToast({
            title: "密码修改成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(()=>{
            uni.navigateTo({
              url: "/pages/login/index"
            })
          }, 1500)
        })
      },
      handleToggle() {
        this.flag = !this.flag;
      },
      handleToggle2(){
        this.flag2 = !this.flag2;
      },
      // 发送验证码
      sendCode() {
        if (!this.fromLine.phone) {
          uni.showToast({
            title: "请输入手机号",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!tools.checkPhone(this.fromLine.phone)) {
          uni.showToast({
            title: "手机号格式错误",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.sendMsg({
          phone: this.fromLine.phone
        }).then(res => {
          uni.showToast({
            title: "验证码发送成功",
            duration: 1500,
            icon: 'none',
            mask: true
          })
          this.countdown = 10;
          this.btnDisabled = true;
          if (this.timer) clearInterval(this.timer);
          this.timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown -= 1;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.btnDisabled = false;
            }
          }, 1000);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .code {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #FF0000;
  }

  .forgotword {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #1071E7;
  }

  .roomDesc-title {
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .txt {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #222;
      margin: 0 15rpx;
    }

    .line {
      width: 50rpx;
      height: 2rpx;
      background: #222;
    }
  }

  .saveBtn-warp {
    display: flex;
    justify-content: center;

    .activeClass {
      width: 337rpx;
      height: 72rpx;
      background: #07C160;
      border-radius: 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #fff;
      text-align: center;
      line-height: 72rpx;
      margin-top: 72rpx;
    }

    .saveBtn {
      width: 337rpx;
      height: 72rpx;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #cccccc;
      text-align: center;
      line-height: 72rpx;
      margin-top: 72rpx;
    }
  }


  .myInfo_item {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f9f9f9;

    .flTxt {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
      margin-right: 84rpx;
    }
  }

  .userInfo {
    padding: 36rpx 44rpx;
    box-sizing: border-box;

    .userInfo-tp {
      position: relative;
      display: flex;
      align-items: center;

      .userInfo-tp-img {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
      }

      .userInfo-tp-txt {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
        margin-left: 10rpx;
      }
    }

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #000000;
      margin-top: 32rpx;
    }

    .desc {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
      margin-top: 8rpx;
    }
  }

  .headerBg {
    width: 292rpx;
    height: 322rpx;
  }

  .psdIcon {
    width: 48rpx;
    height: 48rpx;
  }

  .containter {
    width: 100vw;
    height: 100vh;
    background: #fff;
    position: relative;

    .title {
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 48rpx;
      color: #222222;
      text-align: center;
      margin-top: 216rpx;
    }

    .bgImg {
      position: absolute;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 10;
    }

    .header {
      padding: 50rpx;
      box-sizing: border-box;

      .header-line {
        width: 8rpx;
        height: 36rpx;
        background: #1071E7;
        border-radius: 44rpx;
        margin-right: 20rpx;
      }

      .header-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 40rpx;
        color: #323233;
      }
    }

    .login-warpper {
      padding: 50rpx;
      box-sizing: border-box;

      .login-warpper-item {
        height: 96rpx;
        margin-top: 48rpx;
        border-bottom: 2rpx solid #eee;

        .icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 20rpx;
        }

        .ipt {
          flex: 1;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #222;
        }

        .styles {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #C8C9CC;
        }
      }
    }

    .footer {
      position: fixed;
      bottom: 30rpx;
      padding: 50rpx;
      box-sizing: border-box;
      width: 100%;
      z-index: 100;

      .btn {
        width: 100%;
        height: 88rpx;
        background: #1071E7;
        border-radius: 44rpx;
        text-align: center;
        line-height: 88rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
      }
    }
  }
</style>